<template>
  <div>
    <Home-Header></Home-Header>

    <Home-Swiper :SwiperList="SwiperList"></Home-Swiper>

    <Home-Icons :IconsList="IconsList"></Home-Icons>
    <Home-Location></Home-Location>
    <Home-Hot :hotList="hotList"></Home-Hot>
    <Home-Hoder :hoderList="hoderList"></Home-Hoder>
    <Home-Gode :goodList="goodList"></Home-Gode>
  </div>
</template>


<script>
import { mapState } from 'vuex'
import HomeHeader from './pages/Header';
import HomeSwiper from './pages/Swiper';
import HomeIcons from './pages/Icons';
import HomeLocation from './pages/Location';
import HomeHot from './pages/Hot';
import HomeHoder from './pages/Hoder';
import HomeGode from './pages/Gode';

export default {
  name: 'Home',
  data () {
    return {
      IconsList: [],
      SwiperList: [],
      goodList: [],
      hoderList: [],
      hotList: [],
      chenCity: ''
    }
  },
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeLocation,
    HomeHot,
    HomeHoder,
    HomeGode
  },
  methods: {
    getHttp() {
      this.$http.get("/api/dataHome.json").then(res=> {
        const data = res.data.data;
        data.forEach((item,index) => {
          if(item.city == this.city) {
            this.IconsList = item.IconsList;
            this.SwiperList = item.SwiperList;
            this.goodList = item.goodList;
            this.hoderList = item.hoderList;
            this.hotList = item.hotList;
          }
        });
      }) 
    }
  },
  computed: {
    ...mapState(['city'])
  },
  mounted() {
    this.chenCity = this.city,
    this.getHttp();
  },
  activated() {
    if(this.chenCity != this.city) 
      this.getHttp();
      this.chenCity = this.city;
  }
}

</script>


<style scoped>

</style>
